<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta charset="UTF-8">
    <title>发表</title>
    <link rel="stylesheet" href="../css/mui.min.css"/>
    <link rel="stylesheet" href="../css/mui.picter.min.css"/>
    <link rel="stylesheet" href="../css/base.css"/>
    <link rel="stylesheet" href="../css/sweetalert2.css"/>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="../css/chat.css"/>
    <link rel="stylesheet" href="../css/location.css"/>
    <link rel="stylesheet" href="../css/publish_activity.css"/>
    <link href="../css/data_time/mobiscroll.2.13.2.css" rel="stylesheet" />
    <!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=dab2ba81e6cf73424073bac951dba319"></script>
     <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>-->
    <style>
        /*改变placeholder的字体颜色*/
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #999; opacity:1;
        }

        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #999;opacity:1;
        }

        input:-ms-input-placeholder{
            color: #999;opacity:1;
        }

        input::-webkit-input-placeholder{
            color: #999;opacity:1;
        }

        #loading{
            display: none;
            position: fixed;
            top: 30%;
            left: 50%;
            z-index: 122222222222;
            transform: translate(-50%,-50%);
        }
        #loading img{
            width: 1rem;
            vertical-align:middle;
        }
        #loading div{
            margin-top: 0.2rem;
            margin-left: -0.15rem;
        }
        #tip{
            text-align: center;
        }
        .publish_header{
            border-bottom: 1px solid #eeeeee;
            position: fixed;
            top: 0;
        }
        #style{
            padding-top: 1.5rem;
            height: 2rem;
            font-size: 0.28rem;
            padding-bottom: 0.3rem;
        }
        .say textarea{
            font-size: 0.28rem;
        }
        #sure{
            height: 1.2rem;
            padding-top: 0.1rem;
        }
        .confirm{
            font-size: 0.32rem;
            bottom: 0.1rem;
        }
    </style>
</head>
<body>
<div id="loading">
    <img src="../img/login.gif" alt=""/>
    <div>发送中，请等待...</div>
</div>
<div class="location_alert" style="display: none">
    <header class="clearfix chat_All">
        <i class="back_pub" ></i>
        <h3 class="back_pub">所在位置</h3>
    </header>
    <div class="location_main">
        <div class="location_hidden">
            <span id="click_hidden" >不显示位置</span>
            <em id="hidden_location"></em>
        </div>
        <div id="container" class="map message" tabindex="0"></div>
        <div id='tip'>
        </div>
        <input type="hidden" id="userlocaltionid">
        <input type="hidden" id="userlocaltiontext">
        <input type="hidden" id="addresscode">
    </div>
</div>
<div class="publish_layer" style="overflow-x: hidden">
    <header class="publish_header">
        <i class="f_left" onclick="back()" ></i>
        <h3 class="publish">发布宝贝</h3>
    </header>
    <input type="text" class="style" id="style" placeholder="标题    品类品牌型号都是买家喜欢搜索的"/>
    <div class="say">
        <textarea name="" id="" cols="50" rows="5" placeholder="描述一下宝贝的转手原因、入手渠道和使用感受"></textarea>
    </div>
    <div class="imageBox">
        <!--<a href="javascript:;" class="image">
              <img src="../img/publish_common.png" alt="" class="userImg"/>
              <span class="add_pic">点击添加图片</span>
          </a>-->
        <!--<a href="javascript:;">
          <img src="../img/publish_common.png" alt="" class="userImg"/>
          <span class="add_pic">点击添加图片</span>
      </a>
          <input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput" multiple>-->
        <div class="z_photo">
            <div class="z_file">
                <!--   <img src="../img/publish_common.png" alt="" class="userImg"/>-->
                <!--<span class="add_pic">点击添加图片</span>-->
                <input type="file" capture="camera" name="file" id="file" value=""  accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />
            </div>
        </div>

        <div class="z_mask">
            <div class="z_alert">
                <p>确定要删除这张图片吗？</p>
                <p>
                    <span class="z_cancel">取消</span>
                    <span class="z_sure">确定</span>
                </p>
            </div>
        </div>
    </div>
     <div class="location">
         <img src="../img/point.png" alt=""/>
         <em class="location_info">位置</em>

     </div>
    <div class="new_good"><i></i> <em>全新宝贝</em></div>

    <div class="activity_time">
        <div class="activity_space">
            <span>价格</span>&nbsp;&nbsp;
            <em>邮费</em>
            <i></i>
        </div>
        <!--<div class="sign_up_setting">
            <span>分类</span>
            <i></i>
        </div>-->
    </div>
    <div id="mask"></div>
    <div id="price">
       <p class="this_price">价格 <input type="text" placeholder="￥ 0.00"/></p>
       <p class="post">邮费 <input type="text" placeholder="￥ 0.00"/></p>
        <button class="sure">确定</button>
    </div>
    <div id="sure">
        <button class="confirm">
            确定发布
        </button>
    </div>

</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.picker.min.js"></script>
<script src="../js/x_rem.js"></script>
<script src="../js/base.js"></script>
<script src="../js/data_time/jquery-1.9.1.js"></script>
<script src="../js/sweetalert2.js"></script>
<script src="../js/data_time/mobiscroll.2.13.2.js"></script>
<!--<script src="../js/jquery.js"></script>-->
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.3&key=694bf3b4b0595d121de5d1b327d5c7ba&plugin=AMap.ToolBar'></script>
<!-- UI组件库 1.0 -->
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.10"></script>
<script src="../js/location1.js"></script>
<script>
    //点击新宝贝
    var tag=false;
    $(".new_good").click(function(){
        if(!tag){
            $(".new_good i").text("√");
            tag=true;
            //全新宝贝
        }else{
            $(".new_good i").text("");
            tag=false;
            //二手宝贝
        }
        //console.log(tag);
    });
    //点击价格 出现遮罩弹框 输入价格 价格展示
    $(".activity_space").click(function(){
        $("#mask").show();
        $("#price").show();

    })
    //点击遮罩 消失
    $("#mask").click(function () {
        $(this).hide();
        $("#price").hide();
    });
    //点击确定  消失 获取价格 邮费
    $(".sure").click(function () {
        var price=$(".this_price input").val();
        var post=$(".post input").val();
        if( price!==""){
           localStorage.setItem("price",price);
           localStorage.setItem("post",post);
        }
        $("#price").hide();
        $("#mask").hide();

        //显示价格和邮费
        if(localStorage.getItem("price")){
            $(".activity_space>span").text("价格：￥"+localStorage.getItem("price"));
            $(".activity_space>em").show();
            $(".activity_space>em").text("邮费：￥"+localStorage.getItem("post"));
        }
    });

    //图片上传
    var obj={};
    $(".confirm").click(function(){
        //转换成功 图片的base64地址 很重要
        // console.log(images);
        //获取用户输入的全部内容之后 包括图片的地址  发送给后台 在进行页面的跳转
        var goodsName=$(".style").val() ;
        var introduction=$("textarea").val() ;
        var price=localStorage.getItem("price");
        var expressFee=localStorage.getItem("post");
        if(introduction!==""||images.length !==0||goodsName!==""||$(".location_info").text()!=="位置"){
            obj.goodsName=goodsName;
           obj.introduction=introduction;
            obj.expressFee=expressFee;
            obj.address= $(".location_info").text();
            obj.price=price;
           obj.Base64= JSON.stringify(images);
            //obj.location= $(".location_info").text();
            console.log(obj);
            $.ajax({
                //处理session每次不唯一问题
                xhrFields: {
                    withCredentials: true
                },

                //请求方式
                type:'post',
                url:baseUrl+'/goods/pushOldGoods',
                dataType:'json',
                data:obj,
                beforeSend:function(msg){
                   $("#loading").show();
                },
                success:function(data){
                    console.log(data);
                    if(data.code=="success"){
                        $("#loading").hide();
                        swal(
                                '干得漂亮！',
                                '您发表成功了！',
                                'success'
                        ).then(function(){

                                    //清除location 本地存储
                                    //localStorage.removeItem("location");
                                    localStorage.removeItem("price");
                                    localStorage.removeItem("post");
                                    window.location.href="./business.html";
                                })
                    }
                },
                error:function(data){
                    console.log(data);
                }
            })
        }
        else{
            sweetAlert(
                    'sorry',
                    '记得填写内容哦！',
                    'error'
            )
        }

    })


    /*上传图片
     * */
    function imgChange(obj1, obj2) {
        //获取点击的文本框
        var file = document.getElementById("file");
        //存放图片的父级元素
        var imgContainer = document.getElementsByClassName(obj1)[0];

        //获取的图片文件
        var fileList = file.files;
        //文本框的父级元素
        var input = document.getElementsByClassName(obj2)[0];

        var imgArr = [];
        //遍历获取到得图片文件
        for (var i = 0; i < fileList.length; i++) {
            //判断上传的图片大小
            if(file.files && file.files[i]){
                var fileData = file.files[i];
                var size = fileData.size;   //注意，这里读到的是字节数
                var isAllow = false;
                if(!size) isAllow = false;
                var maxSize = 2048;
                maxSize = maxSize * 1024;   //转化为字节
                isAllow = size <= maxSize;
                if(!isAllow){
                    alert("大小超过2 M，请重新上传");
                    return false;
                }
            }

            //结束

            var imgUrl = window.URL.createObjectURL(file.files[i]);
            imgArr.push(imgUrl);
            var img = document.createElement("img");
            img.setAttribute("src", imgArr[i]);
            var imgAdd = document.createElement("div");
            imgAdd.setAttribute("class", "z_addImg");
            imgAdd.appendChild(img);
            imgContainer.appendChild(imgAdd);
            //getBase64Image(img,imgArr[i]);
        };
        //'console.log(imgArr);这个是图片的本地地址
        for(let i=0;i<imgArr.length;i++){
            (function(image, x, y,index){
                drawing(image, x, y,index)
            })(imgArr[i],0,0,i)
        }
        imgRemove();
    };
    function imgRemove() {
        var imgList = document.getElementsByClassName("z_addImg");
        var mask = document.getElementsByClassName("z_mask")[0];
        var cancel = document.getElementsByClassName("z_cancel")[0];
        var sure = document.getElementsByClassName("z_sure")[0];
        for (var j = 0; j < imgList.length; j++) {
            imgList[j].index = j;
            imgList[j].onclick = function() {
                var t = this;
                mask.style.display = "block";
                cancel.onclick = function() {
                    mask.style.display = "none";
                };
                sure.onclick = function() {
                    mask.style.display = "none";
                    t.style.display = "none";
                };

            }
        };
    };
    var container=document.querySelector(".z_photo");
    var images=[];
    function drawing(image, x, y,index) {
        var img = new Image();
        img.crossOrigin = 'anonymous';
        img.src = image;
        img.onload = function () {
            let id='canvas'+index;
            createCanvas(id,img.width,img.height);
            var cs = document.getElementById(id);
            var ctx = cs.getContext("2d");
            ctx.drawImage(img, x, y);
            var imageUrl=cs.toDataURL('', 1);
            images.push(imageUrl);
            //转换成功
            // console.log(images);
            removeDom(id);
        } ;
    }

    function createCanvas(id,width,height){
        var canvas=document.createElement("canvas");
        canvas.setAttribute('id',id);
        canvas.setAttribute('width',width);
        canvas.setAttribute('height',height);
        canvas.style.display="none";
        container.appendChild(canvas);
    }
    function removeDom(id){
        document.getElementById(id).outerHTML='';
    }
    $(".location").click(function(){
        $(".location_alert").css("display","block");
        $(".publish_layer").css("display","none");
        $(".back_pub").click(function(){
            $(".location_alert").css("display","none");
            $(".publish_layer").css("display","block");
            //获取位置
            var location_info=localStorage.getItem("location");
            if(location_info){
                $(".location_info").text(location_info.substr(3,location_info.length));
                //显示之后 清除  还有reamrk别名
                console.log(location_info);
            }else{
                $(".location_info").text("位置")
            }
        })
    })

</script>

</body>
</html>
